<template>
  <div id="order">
    <!-- 全局注册，直接使用 -->
    <page-header-com>
      <!-- <slot></slot>默认插槽直接填充  -->
      <h1>我的订单</h1>
      <!-- 使用多个插槽，通过template标签使用具名插槽 默认#default（#='v-slot',只可使用在template标签和组件名上）-->
      <!-- <template #default>我的订单</template>
      <template #right> 保存 </template> -->
    </page-header-com>
    <div class="title">
      <router-link to="/order/all/1"
        ><p @click="num = 0" :class="{ change: num == 0 }">全部</p></router-link
      >
      <router-link to="/order/all/1"
        ><p @click="num = 1" :class="{ change: num == 1 }">
          待付款
        </p></router-link
      >
      <router-link to="/order/all/2"
        ><p @click="num = 2" :class="{ change: num == 2 }">
          待发货
        </p></router-link
      >
      <router-link to="/order/all/3"
        ><p @click="num = 3" :class="{ change: num == 3 }">
          待收货
        </p></router-link
      >
      <router-link to="/order/all/6"
        ><p @click="num = 4" :class="{ change: num == 4 }">
          待评价
        </p></router-link
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  data () {
    return {
      cheked: true,
      num: 0
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
#order {
  a {
    text-decoration: none;
  }
  // 视窗宽度
  width: 100vw;
  .mineTop {
    height: 13.6vw;
    background: inherit;
    background-color: rgba(234, 233, 229, 1);
    font-weight: 700;
    font-size: 4.267vw;
    color: #1e1e1e;
  }
  .title {
    width: 100%;
    height: 9.333vw;
    box-sizing: border-box;
    padding: 0vw 9.333vw;
    background-color: #eae9e5;
    display: flex;
    justify-content: space-between;
    p {
      width: 12vw;
      height: 100%;
      box-sizing: border-box;
      text-align: center;
      line-height: 9.333vw;
    }
    .change {
      color: #c1ab96;
      border-bottom: #c1ab96 0.65vw solid;
    }
  }
}
</style>